<!-- 备注编辑弹窗 -->
<template>
  <ele-modal
    form
    width="602px"
    :model-value="modelValue"
    :title="title"
    @update:modelValue="updateModelValue"
  >
    <ele-pro-table
      ref="tableRef"
      row-key="userId"
      :columns="columns"
      :datasource="datasource"
      :show-overflow-tooltip="true"
      v-model:selections="selections"
      highlight-current-row
      border
      stripe
      :show-summary="true"
      :summary-method="getSummaries"
    >
      <template #pass_amount="{ row }">
        <span :class="amountClass(row)" @click="openSalaryDetail(row)">
          {{ row.passAmount }}
        </span>
      </template>
      <template #pass_quantity="{ row }">
        <span class="blue pointer" @click="openSalaryDetail(row)">
          {{ row.pass_quantity }}
        </span>
      </template>
      <template #company_pay_amount="{ row }">
        <span class="warning pointer" @click="openEditSalary(row)">
          {{ row.companyPayAmount }}
        </span>
      </template>
      <template #company_pay_price="{ row }">
        {{ row.company_pay_quantity }} / {{ row.company_pay_price }}
      </template>
      <template #action="{ row }">
        <el-button size="small" type="success" @click="openDetail(row)">
          工资表详情
        </el-button>
      </template>
      <template #realname="{ row }">
        <span class="pointer blue" @click="openStudentDetail(row)">
          {{ row.member }}
        </span>
      </template>
    </ele-pro-table>
  </ele-modal>
</template>

<script setup>
  import { ref, watch, computed } from 'vue';
  import { pageSalaryDetailDuizhang } from '@/api/company';

  const props = defineProps({
    /** 弹窗是否打开 */
    modelValue: Boolean,
    data: Object,
    belongsDate: String
  });
  const emit = defineEmits(['done', 'update:modelValue']);
  /** 表格实例 */
  const tableRef = ref(null);

  /** 表格列配置 */
  const columns = computed(() => {
    const cols = [];
    cols.push(
      {
        prop: 'id',
        label: '编号',
        width: 80
      },
      {
        prop: 'work_date',
        label: '日期',
        width: 120
      },
      {
        prop: 'total_amount',
        label: '垫付金额',
        width: 120
      },
      {
        prop: 'total_quantity',
        label: '对账工时',
        width: 120
      },
      {
        prop: 'total_company_pay',
        label: '应回金额',
        width: 120
      }
    );
    return cols;
  });

  /** 表格选中数据 */
  const selections = ref([]);

  /** 表格数据源 */
  const datasource = ({ page, limit, where, orders }) => {
    return pageSalaryDetailDuizhang({
      ...where,
      ...orders,
      page,
      limit,
      company_id: props.data.company_id,
      belongs_date: props.data.belongs_date,
      position_id: props.data.position_id
    });
  };
  const amountClass = (row) => {
    let blue = 'blue pointer';
    let red = 'red pointer';
    return row.pass_amount < row.company_pay_amount ? blue : red;
  };

  const getSummaries = (param) => {
    const { columns, data } = param;
    const sums = [];

    columns.forEach((column, index) => {
      if (index === 0) {
        sums[index] = '小计';
        return;
      }

      if (index === 2) sums[index] = sum(data, 'total_amount').toFixed(2);
      if (index === 3) sums[index] = sum(data, 'total_quantity').toFixed(2);
      if (index === 4) sums[index] = sum(data, 'total_company_pay').toFixed(2);
    });

    return sums;
  };

  /** 总计方法 */
  const sum = (data, prop) => {
    var total = 0;
    for (let i = 0; i < data.length; i++) {
      const element = data[i];
      total += element[prop] * 1;
    }
    return total;
  };

  const current = ref({});
  /** 学生详情 */
  const showSalaryDetail = ref(false);
  const openSalaryDetail = (row) => {
    current.value = row;
    showSalaryDetail.value = true;
  };

  const currentId = ref(0);
  /** 学生详情 */
  const showStudentDetail = ref(false);
  const openStudentDetail = (row) => {
    currentId.value = row.member_id ?? 0;
    showStudentDetail.value = true;
  };

  /** 编辑应收款 */
  const showEditSalary = ref(false);
  const openEditSalary = (row) => {
    current.value = row ?? {};
    showEditSalary.value = true;
  };
  /** 更新modelValue */
  const updateModelValue = (value) => {
    emit('update:modelValue', value);
  };

  const title = ref('');

  watch(
    () => props.modelValue,
    (modelValue) => {
      if (modelValue) {
        title.value = props.data.position_title + '的对账表';
      } else {
        console.log('什么也没发生');
      }
    }
  );
</script>
